<template>
  <div>
    <a-modal
      title="设置关联关系"
      :visible="visible"
      :width="700"
      wrapClassName="set-table-link-dialog"
      @ok="handleSave"
      @cancel="handleCancel"
    >
			<div class="link-box">
        <div
          :class="['link-item', {'active': item.value == relType}]"
          v-for="item in linkList"
          :key="item.value"
          @click="seletLinkType(item.value)"
        >
          <img :src="item.icon">
          <p>{{item.name}}</p>
        </div>
			</div>
			<div class="column-box">
        <div class="column-title">
          <div><span v-if="startTable!==null" :title="startTable.tableName">{{startTable.tableName}}</span></div>
          <div></div>
          <div><span v-if="endTable!==null">{{endTable.tableName}}</span></div>
          <div>
            <a-icon type="plus" title="增加" @click="addRelItem"/>
            <a-icon type="delete" title="删除全部" @click="deleteAllRelItem"/>
          </div>
        </div>
        <div class="column-list">
          <div class="column-item" v-for="(item,index) in relInfo" :key="index">
            <div>
              <a-select
                v-model="item.columnId"
                placeholder="请选择数关联字段"
                :options="tableOptions"
              >
              </a-select>
            </div>
            <div></div>
            <div>
              <a-select
                v-model="item.relColumnId"
                placeholder="请选择数关联字段"
                :options="retTableOptions"
              >
              </a-select>
            </div>
            <div>
              <a-icon type="minus" title="删除" @click="deleteRelItem"/>
            </div>
          </div>
        </div>
			</div>
      <template slot="footer">
        <a-button  @click="handleCancel">取消</a-button>
        <a-button  @click="handleDelete" v-if="type==='edit'">删除关联</a-button>
        <a-button type="primary" @click="handleSave">
          确定
        </a-button>
      </template>
    </a-modal>
  </div>
</template>
<script>
export default {
  data() {
    return {
      visible: false,
      confirmLoading: false,
      // 默认内连接
      relType: '3',
      linkList: [
        {
          name: '左连接',
          value: '1',
          icon: require('@/assets/index/left-link.png')
        },
        {
          name: '内连接',
          value: '3',
          icon: require('@/assets/index/inside-link.png')
        },
        {
          name: '右连接',
          value: '2',
          icon: require('@/assets/index/right-link.png')
        },
        {
          name: '全连接',
          value: '4',
          icon: require('@/assets/index/all-link.png')
        }
      ],
      type: 'add',
      startTable: null,
      endTable: null,
      tableOptions: [],
      retTableOptions: [],
      // 字段关联关系
      relInfo: [
        {
          columnId: undefined,
          relColumnId: undefined,
          relType: '1'
        }
      ]
    }
  },
  methods: {
    show({ type, startTable, endTable, relInfo, relType }) {
      this.visible = true
      this.type = type
      this.startTable = startTable
      this.endTable = endTable

      this.tableOptions = []
      startTable.columnIds.map(item => {
        this.tableOptions.push({
          value: item.id,
          title: item.columnName
        })
      })

      this.retTableOptions = []
      endTable.columnIds.map(item => {
        this.retTableOptions.push({
          value: item.id,
          title: item.columnName
        })
      })

      if (type === 'edit') {
        this.relInfo = JSON.parse(JSON.stringify(relInfo))
        this.relType = relType
      }
    },
    seletLinkType(value) {
      this.relType = value
    },
    addRelItem() {
      // 判断当前是否有未勾选的行
      const item = this.relInfo[this.relInfo.length - 1]
      if (item.columnId === undefined || item.relColumnId === undefined) {
        this.$message.warning('存在未选择关联字段的数据列')
        return
      }

      this.relInfo.push(
        {
          columnId: undefined,
          relColumnId: undefined,
          relType: '1'
        }
      )
    },
    deleteRelItem(index) {
      if (this.relInfo.length === 1) {
        this.deleteAllRelItem()
      } else {
        this.relInfo.splice(index, 1)
      }
    },
    deleteAllRelItem() {
      this.relInfo = [
        {
          columnId: undefined,
          relColumnId: undefined,
          relType: '1'
        }
      ]
    },
    handleSave() {
      const item = this.relInfo[this.relInfo.length - 1]
      if (item.columnId === undefined || item.relColumnId === undefined) {
        this.$message.warning('存在未选择关联字段的数据列')
        return
      }
      this.visible = false
      this.$emit('save', {
        type: this.type,
        startTable: this.startTable,
        endTable: this.endTable,
        relType: this.relType,
        relInfo: this.relInfo
      })
    },
    handleCancel(e) {
      this.$emit('cancel')
      this.visible = false
    },
    handleDelete() {
      this.$emit('delete', {
        startTable: this.startTable,
        endTable: this.endTable
      })
      this.visible = false
    }
  }
}
</script>
<style lang="less" scoped>
.set-table-link-dialog {
  .link-box {
    display: flex;
    height: 70px;
    justify-content: center;

    &>.link-item {
      flex: 1;
      height: 70px;
      text-align: center;
      cursor: pointer;
      padding-top: 5px;

      &.active {
        background-color: rgb(205, 233, 255);
      }
    }
  }

  .column-box {
    margin-top: 10px;

    &>.column-title {
      height: 30px;
      line-height: 30px;
      display: flex;
      justify-content: center;
      background-color: #fafafa;

      &>div {
        height: 30px;
        text-align: center;

        &:nth-of-type(1) {
          flex: 1;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          padding: 0 10px;
        }

        &:nth-of-type(2) {
          width: 30px;
          background: url('~@/assets/index/link-icon.png') no-repeat center center;
        }

        &:nth-of-type(3) {
          flex: 1;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          padding: 0 10px;
        }

        &:nth-of-type(4) {
          width: 50px;

          &>i {
            cursor: pointer;
            margin: 0 2px;
            font-size: 16px;
          }
        }
      }
    }

    &>.column-list {
      height: 180px;
      overflow: auto;

      &>.column-item {
        height: 31px;
        line-height: 32px;
        margin-top: 13px;
        display: flex;
        justify-content: center;

        &>div {
        height: 32px;
        text-align: center;
        overflow: hidden;

        &:nth-of-type(1) {
          flex: 1;
        }

        &:nth-of-type(2) {
          width: 30px;
          background: url('~@/assets/index/link-icon.png') no-repeat center center;
        }

        &:nth-of-type(3) {
          flex: 1;
        }

        &:nth-of-type(4) {
          width: 50px;

          &>i {
            cursor: pointer;
            margin: 0 2px;
            font-size: 16px;
          }
        }
      }
      }
    }
  }
}
</style>
<style lang="less">
.set-table-link-dialog {
  .ant-modal-body {
    padding: 10px 15px;

    .ant-select {
      width: 100%;
    }
  }
}
</style>
